<template>
	<u-overlay :show="modalShow" @click="handleHide(false)">
		<view @click.stop class="bg-white modal-cont" v-if="modalData">
			<view class="flex padding">
				<view class="flex align-center">
					<image class="poster margin-right" :src="modalData.img" mode=""></image>
				</view>
				<view class="flex justify-between info list">
					<view class="">
						{{modalData.name}}
						<view class="margin-tb-xs">{{modalData.french}}</view>
						￥{{modalData.list[dropIdx].price}}
					</view>
				</view>
			</view>
			<view class="flex justify-between padding u-border-top">
				<view class="">
					规格选择
				</view>
				<view class="sku-list padding-lr" @click="dropShow=true">
					{{modalData.list[dropIdx].spec}}
					({{modalData.list[dropIdx].weight}})
					-
					{{modalData.list[dropIdx].edible}}
					<view class="drop-cont" v-if="dropShow">
						<view 
							class="padding" 
							v-for="(item,index) in modalData.list"
							@click.stop="handleDrop(index)"
						>
							{{item.spec}}
							({{item.weight}})
							-
							{{item.edible}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding u-border-top align-center">
				<view class="">
					数量选择
				</view>
				<u-number-box v-model="value" buttonSize="20"></u-number-box>
			</view>
			<view class="flex btn-cont text-center">
				<view class="padding bg-yellow" @click="handleHide(false)">
					取消
				</view>
				<view class="padding bg-brown" @click="handleAdd">
					确定
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"cart-modal",
		data() {
			return {
				value:1,
				dropShow:false,
				dropIdx:0
			};
		},
		computed: {
			...mapState({
				modalShow:state=>state.cart.modalShow,
				modalData:state=>state.cart.modalData
			})
		},
		methods: {
			handleAdd() {
				this.$store.commit('cart/modalMut',false)
				this.$store.commit('cart/cartAddMut',{
					...this.modalData,
					dropIdx:this.dropIdx,
					num:this.value
				})
				this.dropIdx = 0
			},
			handleDrop(idx){
				this.dropShow = false
				this.dropIdx = idx
			},
			...mapMutations({
				handleHide:'cart/modalMut'
			})
		},
	}
</script>

<style lang="scss">
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.modal-cont{
	position: absolute;
	top: 50%;
	left: 5%;
	width: 90%;
	transform: translateY(-50%);
}
.btn-cont view{
	width: 50%;
}
.sku-list{
	position: relative;
}
.drop-cont{
	position: absolute;
	top: 65upx;
	right: 0;
	background-color: #fff;
	box-shadow: 0 0 20upx 5upx rgba(0,0,0,0.3);
	z-index: 1;
}
</style>